<template>
    <div class="user">
        <div class="user-header" v-if="user">
            <div class="user-icon">
                <img :src="user.data.icon" />
            </div>
            <div class="user-font">
                <span>{{user.data.username}}</span> /
                <span>用户中心</span>
            </div>
        </div>
        <div class="user-header" v-else>
            <div class="user-icon">
                <van-icon name="user-circle-o" size="58" color="#fff" />
            </div>
            <div class="user-font">
                <span @click="$router.push('/login?p=user')">登录</span> /
                <span @click="$router.push('/reg')">注册</span>
            </div>
        </div>
        <div class="user-middle">
            <van-cell is-link title="我的订单" @click="show = true" value="全部订单" icon="notes-o" />
            <div class="pay">
                <div>
                    <van-icon name="refund-o" size="33" />
                    <span>待付款</span>
                </div>
                <div>
                    <van-icon name="clock-o" size="33" />
                    <span>待发货</span>
                </div>
                <div>
                    <van-icon name="free-postage" size="33" />
                    <span>待收货</span>
                </div>
                <div>
                    <van-icon name="flower-o" size="33" />
                    <span>待评价</span>
                </div>
            </div>
        </div>
        <div class="user-middle">
            <van-cell is-link title="我的小金库" @click="show = true" icon="balance-o" />
            <div class="pay">
                <div>
                    <p>800.0</p>
                    <span>账户余额</span>
                </div>
                <div>
                    <p>50.0</p>
                    <span>返现金额</span>
                </div>
                <div>
                    <p>550.0</p>
                    <span>待返回</span>
                </div>
                <div>
                    <p>16.5</p>
                    <span>蓝豆</span>
                </div>
            </div>
        </div>
        <div class="user-footer">
            <van-cell is-link title="交易记录" @click="show = true" icon="newspaper-o" />
            <van-cell is-link title="我的收藏" @click="show = true" icon="star-o" />
            <van-cell
                replace
                is-link
                title="地址管理"
                @click="show = true"
                to="/user/addressList"
                icon="location-o"
            />
            <van-cell is-link title="我的银行卡 " @click="show = true" icon="credit-pay" />
            <van-cell is-link title="密码修改" @click="show = true" icon="goods-collect-o" />
            <van-cell is-link title="退出账号" @click="layout" icon="warn-o" />
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import {UPDATE_FOOTER,UPDATE_LOADING, UPDATE_HEADER} from "../../store/types"
import store from "../../plugins/vuex"
Vue.use(Dialog);
export default {
    name: "",
    data() {
        return {
            user: null
        };
    },
    props: {},
    methods: {
        layout() {
            Dialog.confirm({
                message: "是否注销账号？"
            })
                .then(() => {
                    localStorage.removeItem("user");
                    this.user = null;
                })
                .catch(() => {
                    // on cancel
                });
        }
    },
    components: {},
    mounted() {
        this.user = JSON.parse(localStorage.getItem("user"));
    },
    updated() {},
    beforeRouteEnter(to, from, next) {
        store.commit(UPDATE_HEADER, false)
        store.commit(UPDATE_FOOTER, true);
        store.commit(UPDATE_LOADING, false);
        let user = localStorage.getItem("user");
        if (user) {
            next();
        } else {
            next("/login");
        }
    }
};
</script>

<style scoped>
.user {
    background: #f3f1f1;
    width: 100%;
}
.user-header {
    /* width: 100%; */
    height: 90px;
    background: url(../../assets/img/userbg.png) center 0 #f37d0f;
    background-size: auto 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.user-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    background: #ffaa00;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-font {
    font-size: 14px;
    color: #fff;
}
.user-middle {
    width: 100%;
    margin: 10px 0 10px;
    background: #fff;
}
.user-middle .pay {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgb(235, 234, 234);
    display: flex;
    justify-content: space-around;
    flex: 1;
    padding: 7px 0;
}
.user-middle .pay > div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.user-middle .pay > div span {
    font-size: 12px;
}
.user-middle .pay > div p {
    font-size: 16px;
    margin: 0;
}
</style>
